<template>
  <div><button @click=get_student>获取学生信息</button>
    <button @click=get_cars>获取学生信息</button>
    <!-- 作用域插槽：数据在组件自己这里 -->
    <slot :movies='movies' />
    <button @click='jia(1)'>点击加一</button>
    <button @click='jia_luoji(1)'>奇数才可以点击加一</button>
    <h3>人：{{x}}</h3>
    <h3>公司：{{companies}}</h3>
    <input
      type="text"
      v-model="personName"
    >
    <button @click="add">添加一个人</button>
    <div>最后一个人的姓氏:{{firstPersonName}}</div>
    <div @click='increment'>测试断点{{duanDian}}</div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { nanoid } from "nanoid";
export default {
  name: "Kauyu",
  data() {
    return {
      movies: ["心灵奇旅", "一拳超人"],
      personName: "",
      duanDian:0,
    };
  },
  computed: {
    // 完整写法
    // ...mapState({'zongshu':'x'})
    // 第一步简化。属性名是可以不加引号，对象默认会给属性转化为字符串。但是这个不能使用对象简写形式，因为只有x是变量而不是字符串的时候，属性名和属性值一样才可以简写
    // ...mapState({zongshu:'x'})
    // 最终简化
    ...mapState("personsStore", ["x"]),
    ...mapState("companiesStore", ["companies"]),
    firstPersonName() {
      return this.$store.getters["companiesStore/firstPersonName"];
    },
  },
  methods: {
    get_student() {
      axios.get("http://localhost:8084/carlos/students").then(
        (res) => {
          console.log("请求成功了", res);
        },
        (error) => {
          console.log("请求失败了", error);
        }
      );
    },
    get_cars() {
      axios.get("http://localhost:8084/wong/cars").then(
        (res) => {
          console.log("请求成功了", res);
        },
        (error) => {
          console.log("请求失败了", error);
        }
      );
    },
    add() {
      let personObj = { name: this.personName, id: nanoid() };
      //   这样写不对的
      //   this.$store.commit("companiesStore",'add_person',personObj);
      this.$store.commit("companiesStore/add_person", personObj);
    },
    ...mapMutations("personsStore", { jia: "jia_of_m" }),
    ...mapActions("personsStore", ["jia_luoji"]),
    increment(){
      this.duanDian++
    },
  },
  mounted() {},
};
</script>

<style>
</style>